<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" 
		content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Templated Mobile Widgets</title>

	<script type="text/javascript" src="../deviceTheme.js"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" 
		data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>

	<script type="text/javascript">
		// Templates
		var templateListItem1, templateListItem2, templateListItem3,
			templateHeading1, templateHeading2, templateButton1, templateCheckBox1, 
			templateToggleButton1, templateSwitch1, templateSlider1, templateRadioButton1,
			templateView1;

		// Templated widget classes
		var TemplatedListItem, TemplatedWithWidgetsListItem, 
			TemplatedHeading, TemplatedWithWidgetsHeading1, 
			TemplatedWithWidgetsHeading2, TemplatedSwitch;
		
		var showMsg;
		var onclick1 = function(e){
			showMsg("msgArea1", "Click!");
		};
		var onclick2 = function(e){
			showMsg("msgArea2", "Click!");
		};
		
		require([
			"dojo/ready",
			"dojo/dom",
			"dijit/registry",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojo/_base/declare",
			"dojo/dom-construct",
			"dijit/_TemplatedMixin",
			"dijit/_WidgetsInTemplateMixin", 
			"dojo/text!./templates/Button1.html",
			"dojo/text!./templates/CheckBox1.html",
			"dojo/text!./templates/Heading1.html",
			"dojo/text!./templates/Heading2.html",
			"dojo/text!./templates/ListItem1.html", // pure HTML
			"dojo/text!./templates/ListItem2.html", // contains widgets
			"dojo/text!./templates/ListItem3.html", // contains widgets
			"dojo/text!./templates/RadioButton1.html",
			"dojo/text!./templates/Slider1.html",
			"dojo/text!./templates/Switch1.html",
			"dojo/text!./templates/ToggleButton1.html",
			"dojo/text!./templates/View1.html",
			"dojox/mobile/ListItem",
			"dojox/mobile/Heading",
			"dojox/mobile/Switch",
			"dojox/mobile/TabBar",
			"dojox/mobile/TabBarButton",
			"dojox/mobile/ScrollableView"
		], function(ready, dom, registry, parser, mobile, compat, declare, domConstruct, 
					TemplatedMixin, WidgetsInTemplateMixin, 
					myTemplateButton1, myTemplateCheckBox1, myTemplateHeading1,
					myTemplateHeading2, myTemplateListItem1, myTemplateListItem2, 
					myTemplateListItem3, myTemplateRadioButton1, myTemplateSlider1, 
					myTemplateSwitch1, myTemplateToggleButton1, myTemplateView1,
					ListItem, Heading, Switch){
		
		templateListItem1 = myTemplateListItem1;
		templateListItem2 = myTemplateListItem2;
		templateListItem3 = myTemplateListItem3;
		templateHeading1 = myTemplateHeading1;
		templateHeading2 = myTemplateHeading2;
		templateButton1 = myTemplateButton1; 
		templateCheckBox1 = myTemplateCheckBox1;
		templateToggleButton1 = myTemplateToggleButton1;
		templateRadioButton1 = myTemplateRadioButton1;
		templateSwitch1 = myTemplateSwitch1;
		templateSlider1 = myTemplateSlider1;
		templateView1 = myTemplateView1;
			
		TemplatedListItem = declare(
			[ListItem, TemplatedMixin], {
				templateString: "<div>My inline <i>HTML</i> template (using declare)<div data-dojo-attach-point=\'labelNode\'></div></div>",
				clickable: true,
				onClick: onclick1
			}
		);
		
		TemplatedWithWidgetsListItem1 = declare( 
			[ListItem, TemplatedMixin], {
				label: "Some label",
				templateString: templateListItem1, // pure HTML
				clickable: true,
				onClick: onclick1
			}
		);
		
		TemplatedWithWidgetsListItem2 = declare( 
			[ListItem, TemplatedMixin, WidgetsInTemplateMixin], {
				label: "Some label",
				templateString: templateListItem2, // contains widgets
				clickable: true,
				onClick: onclick1
			}
		);
		
		TemplatedHeading = declare( 
			[Heading, TemplatedMixin], {
				back:"Back",
				templateString: "<div>My inline <i>HTML</i> template (programmatic)</div>"
			}
		);
		
		TemplatedWithWidgetsHeading1 = declare( 
			[Heading, TemplatedMixin, WidgetsInTemplateMixin], {
				back:"Back",
				templateString: templateHeading1
			}
		);
		
		TemplatedWithWidgetsHeading2 = declare( 
			[Heading, TemplatedMixin, WidgetsInTemplateMixin], {
				back:"Back",
				label: "Templated by: <code>Heading2.html</code> (using declare)",
				templateString: templateHeading2
			}
		);
		
		TemplatedSwitch = declare( 
			[Switch, TemplatedMixin], {
				templateString: templateSwitch1
			}
		);
		
		var timer;
		showMsg = function(msgAreaId, msg){
			if(timer){
				clearTimeout(timer);
			}
			var msgArea = dom.byId(msgAreaId);
			msgArea.innerHTML = msg;
			timer = setTimeout(function(){
				msgArea.innerHTML = ""; // clear, don't keep it too long
			}, 1000);
		};
		
		ready(function(){
			// Testing the dynamic addition
			registry.byId("list").addChild(new TemplatedListItem({
				label: "added dynamically",
				clickable: true, onClick: onclick1}));
		});
	});
	</script>

	<style type="text/css">
		html,body{
			height: 100%;
		}
		.mblRoundRect {
			margin-left: 12px;
			margin-right: 12px;
		}
		.bold {
			font-weight: bold;
		}
	</style>
</head>
<body style="visibility:hidden;">
	<div id="main" data-dojo-type="dojox/mobile/View">
		<ul data-dojo-type="dojox/mobile/TabBar" 
			data-dojo-props="barType: 'slimTab', fixed: 'top'">
			<li data-dojo-type="dojox/mobile/TabBarButton" 
				data-dojo-props="moveTo:'ListItem', selected: true">ListItem</li>
			<li data-dojo-type="dojox/mobile/TabBarButton" 
				data-dojo-props="moveTo:'Heading'">Heading</li>
			<li data-dojo-type="dojox/mobile/TabBarButton" 
				data-dojo-props="moveTo:'FormControls'">Form Controls</li>
			<li data-dojo-type="dojox/mobile/TabBarButton" 
				data-dojo-props="moveTo:'View'">View</li>
		</ul>

		<!-- Templated ListItem -->
		<div id="ListItem" data-dojo-type="dojox/mobile/ScrollableView">
			<div id="msgArea1" style="margin-left: 40px; margin-top: 4px; height: 20px"></div>
			<ul id="list" data-dojo-type="dojox/mobile/RoundRectList" 
				data-dojo-props="iconBase:'images/tab-icon-11h.png', variableHeight: true">
				<li data-dojo-type="dojox/mobile/ListItem"
					data-dojo-mixins="dijit/_TemplatedMixin"
					data-dojo-props="label:'Some label', 
						clickable: true, onClick: onclick1,
						templateString: '<div>My inline <i>HTML</i> template (markup)<div data-dojo-attach-point=\'labelNode\'></div></div>'">
				</li>
				<li data-dojo-type="dojox/mobile/ListItem"
					data-dojo-mixins="dijit/_TemplatedMixin"
					data-dojo-props="clickable: true, onClick: onclick1,
						templateString: '<div><div>My inline, multiline <i>HTML</i><br>template (markup)</div></div>'">
				</li>
				<li data-dojo-type=TemplatedListItem>
				</li>
				<li data-dojo-type="dojox/mobile/ListItem"
					data-dojo-mixins="dijit/_TemplatedMixin"
					data-dojo-props="label: '(markup, using data-dojo-mixins)', 
						templateString: templateListItem1,
						clickable: true, onClick: onclick1">
				</li>
				<li data-dojo-type=TemplatedWithWidgetsListItem1
					data-dojo-props="label: '(markup, using declare)'">
				</li>
				<li data-dojo-type=TemplatedWithWidgetsListItem2>
				</li>
				<li data-dojo-type="dojox/mobile/ListItem"
					data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin"
					data-dojo-props="templateString: templateListItem3,
						clickable: true, onClick: onclick1">
				</li>
			</ul>
		</div>
		
		<!-- Templated Form Controls -->
		<div id="FormControls" data-dojo-type="dojox/mobile/ScrollableView">
			<h1 data-dojo-type="dojox/mobile/Heading">Form Controls</h1>
			<div id="msgArea2" style="margin-left: 40px; margin-top: 4px; height: 20px"></div>
			<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
			<table style="width:100%">
				<tr>
					<td><span class="bold">Button</span></td>
					<td style="text-align:right">
						<button data-dojo-type="dojox/mobile/Button" 
							data-dojo-props="templateString: '<button class=\'${baseClass}\' data-dojo-attach-point=\'containerNode\'></button>', onClick: onclick2"
							data-dojo-mixins="dijit/_TemplatedMixin">
							 Press me! (inline template)
						</button>
						<button data-dojo-type="dojox/mobile/Button" 
							data-dojo-props="templateString: templateButton1, onClick: onclick2"
							data-dojo-mixins="dijit/_TemplatedMixin">
							Press me! (external template)
						</button>
					</td>
				</tr>
			</table>
			</div>
			
			<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
			<table style="width:100%">
				<tr>
					<td><span class="bold">Slider</span></td>
					<td style="float:right">
						<input data-dojo-type="dojox/mobile/Slider"
							style="width:150px;" type="range"
							data-dojo-props="templateString: templateSlider1, 
								value:10, min:0, max:40, step:0.1, 
								onChange:function(v){ showMsg('msgArea2', 'value: ' + this.get('value')); }"
							data-dojo-mixins="dijit/_TemplatedMixin">
					</td>
				</tr>
			</table>
			</div>
			
			<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
			<table style="width:100%">
				<tr>
					<td><span class="bold">CheckBox</span></td>
					<td style="text-align:right">
						<label for="cbox">Click me</label>
						<input type="checkbox" id="cbox"
							data-dojo-type="dojox/mobile/CheckBox"
							data-dojo-props="templateString: templateCheckBox1, 
								onChange:function(v){ showMsg('msgArea2', 'checked: ' + this.get('checked')); }">
					</td>
				</tr>
			</table>
			</div>
			
			<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
			<table style="width:100%">
				<tr>
					<td><span class="bold">ToggleButton</span></td>
					<td style="text-align:right">
						<button data-dojo-type="dojox/mobile/ToggleButton"
							data-dojo-props="templateString: templateToggleButton1,
								onChange:function(v){ showMsg('msgArea2', 'checked: ' + this.get('checked')); }">
								Toggle me
						</button>
					</td>
				</tr>
			</table>
			</div>
			
			<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
			<table style="width:100%">
				<tr>
					<td><span class="bold">Switch</span></td>
					<td style="text-align:right">
						<input type="checkbox" value="on"
							data-dojo-type="dojox/mobile/Switch"
							data-dojo-props="templateString: templateSwitch1,
								onStateChanged:function(v){ showMsg('msgArea2', 'value: ' + v); }"
							data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
					</td>
					<td style="text-align:right">
						<input type="checkbox" value="on"
							data-dojo-type=TemplatedSwitch
							data-dojo-props="onStateChanged:function(v){ showMsg('msgArea2', 'value: ' + v); }">
					</td>
				</tr>
			</table>
			</div>
			
			<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props="shadow:true">
			<table style="width:100%">
				<tr>
					<td><span class="bold">Radio Button</span></td>
					<td style="text-align:right">
						<input type="radio" id="rb1" data-dojo-type="dojox/mobile/RadioButton" 
							data-dojo-props="templateString: templateRadioButton1,
								onChange:function(v){ if(this.get('checked')) showMsg('msgArea2', 'checked RadioButton 1'); }"
							name="mobileRadio" value="Large" checked>
						<label for="rb1">1</label>
						
						<input type="radio" id="rb2" data-dojo-type="dojox/mobile/RadioButton" 
							data-dojo-props="templateString: templateRadioButton1,
								onChange:function(v){ if(this.get('checked')) showMsg('msgArea2', 'checked RadioButton 2'); }"
							name="mobileRadio" value="Large">
						<label for="rb2">2</label>
						
						<input type="radio" id="rb3" data-dojo-type="dojox/mobile/RadioButton" 
							data-dojo-props="templateString: templateRadioButton1,
								onChange:function(v){ if(this.get('checked')) showMsg('msgArea2', 'checked RadioButton 3'); }"
							name="mobileRadio" value="Large">
						<label for="rb3">3</label>
				</tr>
			</table>
			</div>
		</div>
		
		<!-- Templated Heading -->
		<div id="Heading" data-dojo-type="dojox/mobile/ScrollableView">
			<!-- Template containing widgets -->
			<div data-dojo-type="dojox/mobile/Heading" 
				data-dojo-props="label:'Some label', templateString: templateHeading1"
				data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
			</div>
			<!-- Pure HTML template -->
			<div data-dojo-type="dojox/mobile/Heading" 
				data-dojo-props="back:'Back', 
					templateString: '<div>My inline <i>HTML</i> template (markup)</div>'"
				data-dojo-mixins="dijit/_TemplatedMixin">
			</div>
			<div data-dojo-type="dojox/mobile/Heading" 
				data-dojo-props="back:'Back',
					label: 'Templated by: <code>Heading2.html</code> (using data-dojo-mixins)', 
					templateString: templateHeading2"
				data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
			</div>
			<div data-dojo-type=TemplatedHeading>
			</div>
			<div data-dojo-type=TemplatedWithWidgetsHeading1>
			</div>
			<div data-dojo-type=TemplatedWithWidgetsHeading2
				data-dojo-props="back: 'Back'">
			</div>
		</div>
		
		<!-- Templated View -->
		<div id="View" data-dojo-type="dojox/mobile/View"
			data-dojo-props="templateString: templateView1"
			data-dojo-mixins="dijit/_TemplatedMixin, dijit/_WidgetsInTemplateMixin">
		</div>
	</div>
</body>
</html>
